<template>
	<view>
		<view class="smart-panel-head">
			<view class="smart-panel-head-title">navigator 链接</view>
		</view>
		<view class="smart-padding-wrap">
			<navigator url="/pages/index/index" hover-class="navigator-hover">
				<button type="default">跳转到新页面</button>
			</navigator>
			<button type="default" @click="goNewPage()">跳转到新页面</button>
			<navigator url="/pages/index/index?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
				<button type="default">在当前页打开</button>
			</navigator>
			<navigator url="redirect/redirect" open-type="reLaunch">
				<button type="default">新建调用栈</button>
			</navigator>
			<navigator url="/pages/tobBar/api/api" open-type="switchTab" hover-class="other-navigator-hover">
				<button type="default">跳转tab页面</button>
			</navigator>
			<navigator url="/pages/tobBar/grammer/grammer" open-type="switchTab" hover-class="other-navigator-hover">
				<button type="default">跳转到语法页</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'navigator',
				user: 'jqf',
				uid: 122512023029,
				list: [1, 2, 3]
			}
		},
		onLoad(options) {
			console.log("navigator页面加载");
		},
		onShow() {
			console.log("-----onShow");
		},
		onPullDownRefresh() {
			this.page = 1;
			this.loadData(() => {
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			if (!this.isLoading) {
				this.page++;
				this.loadMOreData();
			}
		},
		onReady() {
			console.log("-----onReady");
		},
		onHide() {
			console.log("-----onHide");
		},
		onUnload() {
			console.log("-----onUnload");
		},
		methods: {
			goNewPage() {
				uni.navigateTo({
					url: "navigate/navigate?User=" + this.user + "&userid=" + this.uid
				})
			},
			loadData(callback) {
				uni.request({
					url: '/api/news',
					success:(res) => {
						this.newsList = res.data;
						callback && callback();
					}
				});
			},
			loadMOreData(){
				this.isLoading = true;
				uni.request({
					url:`/api/products?page=${this.page}`,
					success:(res) => {
						this.productList = [...this.productList,...res.data];
					},
					complete: () => {
						this.isLoading = false;
					}
				});
			}
		}
	}
</script>

<style>

</style>